<template>

      <div class="ranking">
                <div>
                    <van-nav-bar title="英雄榜" left-arrow @click-left="$router.go(-1)" />
                </div>
                <div class="ranking_main">
                    <p>您距离上榜只有一步之遥，请再接再厉！</p>
                    <table class="ranking_table">
                        <tr>
                            <th>排名</th>
                            <th>会员昵称</th>
                            <th>总业绩</th>
                            <!-- <th>收益</th> -->
                        </tr>
                        <tr v-for="(item, indx) in data">
                            <td v-if="indx==0">
                                <img src="../../assets/img/mine/ranking_one.png">
                            </td>
                             <td v-else-if="indx==1">
                                <img src="../../assets/img/mine/ranking_two.png">
                            </td>
                             <td v-else-if="indx==2">
                                <img src="../../assets/img/mine/ranking_three.png">
                            </td>
                            <td v-else v-html="indx+1"> </td>
                            <td v-html="item.name"></td>
                            <td v-html="item.surplus"></td>
                            <!-- <td v-html="item.commission"></td> -->
                        </tr>
                        <!-- <tr>
                            <td>
                                <img src="../../assets/img/mine/ranking_two.png">
                            </td>
                            <td>三*夜</td>
                            <td>456.20</td>
                            <td>102.02</td>
                        </tr>
                        <tr>
                            <td>
                                <img src="../../assets/img/mine/ranking_three.png">
                            </td>
                            <td>三*夜</td>
                            <td>456.20</td>
                            <td>102.02</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>三*夜</td>
                            <td>456.20</td>
                            <td>102.02</td>
                        </tr> -->
                    </table>
                </div>
            </div>


</template>

<script>



export default {
 name: "login",
data() {
    return {
        data:{},
        
        
    }
},
mounted() { 
    this.base.head_status()
    this.GetRang_metd()
},

 methods: {
        dataDown () {
        this.data.sort(this.down('data'))
      },
      down (name) {
        return function (obj1, obj2) {
          let val1 = parseInt(obj1[name].invit_commission)
          let val2 = parseInt(obj2[name].invit_commission)
          return val2 - val1
        }
      },
      



               GetRang_metd(){

                    let that=this;
                    var data={token:JSON.parse(localStorage.userinfo).token}
                            that._API.GetRang(data).then(res => {
                                    if(res.code==200){
                                        that.data=res.data;
                                      //  that.dataDown()
                                    }else{
                                        that.$toast({ message: res.msg, position: "bottom" });
                                    }
                                
                                }).catch(err => {
                                    console.log("err", err);
                                });
            },
           onClickRight(){

           },
           onClickLeft(){}
               


      }
}
</script>


<style lang="less" scoped >
 .van-nav-bar{
                background: none;
            }
            .van-nav-bar .van-icon{
                color:#fff;
            }
            .van-nav-bar__arrow{
                font-size:20px;
            }
            .van-nav-bar__title{
                color:#fff;
            }

            .ranking_main>p{
                background:#16003C;
                padding:0 0.8rem;
                width:100%;
                box-sizing: border-box;
                line-height: 3rem;
                font-size: 0.9rem;
                border-bottom:1px solid rgba(255,255,255,0.2);
            }
            .ranking_table{
                width:100%;
                text-align: center;
            }
            .ranking_table tr{
                border-bottom:1px solid rgba(255,255,255,0.2);
            }
            .ranking_table tr th{
                line-height: 3.5rem;
                color: #00C6FF;
                font-size:0.9rem;
                font-weight: 400;
            }
            .ranking_table tr td{
                line-height: 3em;
                font-size:0.9rem;
                color: rgba(255,255,255,0.8);
            }
            .ranking_table tr td img{
                width:1.5rem;
                vertical-align: middle;         
            }
            .ranking_table tr td:first-child{
                font-weight: 900;
                font-size: 1rem;
            }
</style>
